<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="basic.css">
    <link rel="stylesheet" href="column.css">
    <title>PC端网页布局</title>
</head>
<body>
    <header id="header">
        <div class="center">
            <h1 class="logo">桂林旅行社</h1>
            <nav class="link">
                <h1 class="none">网站导航</h1>
                <ul>
                    <li><a href="index.html">首页</li></a>
                    <li><a href="information.html">旅游资讯</li></a>
                    <li class="active"><a href="booking.html">机票订购</li></a>
                    <li><a href="#">风景欣赏</li></a>
                    <li><a href="#">公司简介</li></a>
                </ul>
            </nav>
        </div>
        
    </header>
    <div id="headline">
        <div class="center">
            <hgroup>
                <h2>旅游资讯</h2>
                <h3>介绍各种最新旅游信息、资讯要闻、景点攻略等</h3>
            </hgroup>
        </div>
    </div>
    <div id="container">
        <aside class="sidebar">
            <div class="sidebox">
                <h2>景点推荐</h2>
                <div class="tag">
                    <ul>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                        <li><a href="###">曼谷(12)</a></li>
                    </ul>
                </div>
            </div>
            <div class="sidebox hot">
                <h2>热卖旅游</h2>
                <div class="figure">
                    <figure>
                        <img src="./img/hot1.jpg" alt="曼谷-芭提雅6日游">
                        <figcaption>曼谷-芭提雅6日游</figcaption>
                    </figure>
                    <figure>
                            <img src="./img/hot2.jpg" alt="曼谷-芭提雅6日游">
                            <figcaption>曼谷-芭提雅6日游</figcaption>
                        </figure>
                    <figure>
                        <img src="./img/hot3.jpg" alt="曼谷-芭提雅6日游">
                        <figcaption>曼谷-芭提雅6日游</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/hot4.jpg" alt="曼谷-芭提雅6日游">
                        <figcaption>曼谷-芭提雅6日游</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/hot5.jpg" alt="曼谷-芭提雅6日游">
                        <figcaption>曼谷-芭提雅6日游</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/hot6.jpg" alt="曼谷-芭提雅6日游">
                        <figcaption>曼谷-芭提雅6日游</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/hot7.jpg" alt="曼谷-芭提雅6日游">
                        <figcaption>曼谷-芭提雅6日游</figcaption>
                    </figure>
                    <figure>
                        <img src="./img/hot8.jpg" alt="曼谷-芭提雅6日游">
                        <figcaption>曼谷-芭提雅6日游</figcaption>
                    </figure>
                </div>
            </div>
            <div class="sidebox">
                <h2>旅游百宝箱</h2>
                <div class="box">
                    <a href="###" class="trea1">天气预报</a>
                    <a href="###" class="trea2">火车票查询</a>
                    <a href="###" class="trea3">航空查询</a>
                    <a href="###" class="trea4">地铁线路查询</a>
                </div>
            </div>
        </aside>
        <div class="list ticket">
            <form action="###">
                <h2>机票预订</h2>
                <div class="type">
                    <p>航程类型<mark>单程</mark> 往返</p>
                </div>
                <div class="form left">
                    <p>
                        <label for="from_city">出发城市</label>
                        <input type="text" name="from_city" id="from_city" placeholder="城市名">
                    </p>
                    <p>
                        <label for="to_city">返回城市</label>
                        <input type="text" name="to_city" id="to_city" placeholder="城市名">
                    </p>
                </div>
                <div class="form right">
                    <p>
                        <label for="from_date">出发时间</label>
                        <input type="text" name="from_date" id="from_date" placeholder="时间/日期">
                    </p>
                    <p>
                        <label for="to_date">返回时间</label>
                        <input type="text" name="to_date" id="to_date" placeholder="时间/日期">
                    </p>
                </div>
                <div class="form button">
                    <p>
                        <button type="submit" class="submit">订票</button>
                    </p>
                </div>
            </form>

            <div class="new">
                <h2>最新机票</h2>
                <ul>
                    <li>热门城市</li>
                    <li>北京</li>
                    <li>上海</li>
                    <li>广州</li>
                    <li>深圳</li>
                    <li>重庆</li>
                    <li>成都</li>
                    <li>杭州</li>
                    <li>南京</li>
                </ul>

                <table>
                    <thead>
                        <tr>
                            <th>路线</th>
                            <th>日期</th>
                            <th>价格</th>
                            <th>税费</th>
                            <th>餐食</th>
                            <th>航班</th>
                            <th>预订</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>北京-成都</td>
                            <td>10-15</td>
                            <td class="price">￥745</td>
                            <td>￥50</td>
                            <td>有</td>
                            <td>春秋航空</td>
                            <td><a href="###" class="reserve">预订</a></td>
                        </tr>
                        <tr>
                            <td>北京-成都</td>
                            <td>10-15</td>
                            <td class="price">￥745</td>
                            <td>￥50</td>
                            <td>有</td>
                            <td>春秋航空</td>
                            <td><a href="###" class="reserve">预订</a></td>
                        </tr>
                        <tr>
                            <td>北京-成都</td>
                            <td>10-15</td>
                            <td class="price">￥745</td>
                            <td>￥50</td>
                            <td>有</td>
                            <td>春秋航空</td>
                            <td><a href="###" class="reserve">预订</a></td>
                        </tr>
                        <tr>
                            <td>北京-成都</td>
                            <td>10-15</td>
                            <td class="price">￥745</td>
                            <td>￥50</td>
                            <td>有</td>
                            <td>春秋航空</td>
                            <td><a href="###" class="reserve">预订</a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <td colspan="7"><a href="###" class="more2">加载更多航班...</a></td>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
    <footer id="footer">
        <div class="top">
            <div class="block left">
                <h2>合作伙伴</h2>
                <hr>
                <ul>
                    <li>途牛旅游网</li>
                    <li>驴妈妈旅游网</li>
                    <li>携程旅游</li>
                    <li>中国青年旅行社</li>
                </ul>
            </div>
            <div class="block center">
                <h2>旅游FAQ</h2>
                <hr>
                <ul>
                    <li>旅游合同签订有哪些？</li>
                    <li>儿童票有半价优惠吗？</li>
                </ul>
            </div>
            <div class="block right">
                <h2>联系方式</h2>
                <hr>
                <ul>
                    <li>微博: weibo.com/zzz</li>
                    <li>邮件: lpz2@163.com</li>
                    <li>地址: 广西桂林</li>
                </ul>
            </div>
        </div>
        <div class="bottom">Copyright © 桂林旅行社|桂ICP备19011111号|旅行社许可证:xxxxxxx</div>
    </footer>
</body>
</html>